<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="container"></div>

<script type="text/javascript">
	// 命名空间 单体对象
	var A = A || {};
	// 主体展示区容器
	A.root = document.getElementById('container');

	A.view = function(name) {
		// 模板库
		var v = {
			// 代码模板
			code: '<pre><code>{{code}}</code></pre>',
			// 图片模板
			img: '<img src="{{src}}" alt="{{alt}}" title="{{title}}">',
			// 带有id和class的模块模板
			part: '<div id="{{id}}" class="{{class}}">{{part}}</div>',
			// 组合模板
			theme: [
				'<div>',
				'<h1>{{title}}</h1>',
				'{{content}}',
				'</div>'
			].join('')
		};
		// 如果参数是一个数组，则返回多行模板
		if (Object.prototype.toString.call(name) == '[object Array]') {
			// 模板缓存器
			var tpl = '';
			// 遍历标志
			for (var i = 0, len = name.length; i < len; i++) {
				// 模板缓存器追加模板
				tpl += arguments.callee(name[i]);
			}
			return tpl;
		} else {
			return v[name] ? v[name] : ('<' + name + '>{{' + name + '}}<' + name + '>');
		}
	}

	// 模板渲染方法
	A.formatString = function(str, data) {
		return str.replace(/\{\{(\w+)\}\}/g, function(match, key) {
			return typeof data[key] === undefined ? '' : data[key];
		});
	}

	// 创建视图方法集合
	A.strategy = {
		// 文字列表展示
		listPart: function(data) {
			var s = document.createElement('div'),	// 模块容器
				ul = '',							// 列表字符串
				ldata = data.data.li,				// 列表数据
				// 模块模板
				tpl = A.view(['h2', 'p', 'ul']),
				// 列表项模板
				liTpl = A.formatString(A.view('li'), {li: A.view(['strong', 'span'])});
			// 有 id 设置模块 id
			data.id && (s.id = data.id);
			// 遍历列表数据
			for (var i = 0, len = ldata.length; i < len; i++) {
				// 如果有列表项数据
				if (ldata[i].em || ldata[i].span) {
					// 列表字符串追加一箱列表项
					ul += A.formatString(liTpl, ldata[i]);
				}
			}
			// 装饰列表数据
			data.data.ul = ul;
			// 渲染模块并插入模块中
			s.innerHTML = A.formatString(tpl, data.data);
			// 渲染模块
			A.root.appendChild(s);
		},
		codePart: function() {},
		onlyPart: function() {},
		guide: function() {},
	};
	// 创建视图入口
	A.init = function(data) {
		// 根据传输的视图类型创建视图
		this.strategy[data.type](data);
	}

	// 测试
	var cnf = {
		id: 'id',
		type: 'listPart',
		data: {
			li: [{
				em: 'em',
				span: 'span'
			}, {
				em: 'em',
				span: 'span'
			}]
		}
	};
	A.init(cnf);
</script>
</body>
</html>